<template>
  <div class="redeem-code-history">
    <c-title text="兑换码历史记录"></c-title>
    <div class="box">
      <span :class="active == 0 ? 'current' : ''" @click="change(0)">已兑换</span>
      <span :class="active == 1 ? 'current' : ''" @click="change(1)">已转赠</span>
      <span :class="active == 2 ? 'current' : ''" @click="change(2)">已过期</span>
      <span :class="active == 7 ? 'current' : ''" @click="change(7)">未激活</span>
      <span :class="active == 8 ? 'current' : ''" @click="change(8)">已冻结</span>
      <span :class="active == 6 ? 'current' : ''" @click="change(6)">已作废</span>
    </div>

    <div class="list">
      <div class="list-item" v-for="item in list" :key="item.id">
        <div class="left">
          <span class="tips">{{ item.type == 1 ? '商品兑换' : item.type==2?'身份兑换':`${integral}兑换` }}</span>
          <div>
            <p class="name">{{ item.name }}</p>
            <p class="time" v-if="active == 0 ">{{ item.event_time }}兑换</p>
            <p class="time" v-else-if="active == 1">{{ item.event_time }}转赠给【{{ item.tranfer_member }}】</p>
            <p class="time" v-else-if="active == 2 ">{{ item.event_time }}过期</p>
            <p class="time" v-else-if="active == 6">{{ item.event_time }}作废</p>

          </div>
        </div>
        <div class="right">
          <div class="line"></div>
          <span >{{ active == 0 ? '已兑换' : active == 1 ? '已转赠' :  active == 2?'已过期':active == 7?'未激活': active == 8?'已冻结':"已作废"}}</span>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { scrollMixin } from '../../utils/mixin';
export default {
  mixins: [scrollMixin],
  data() {
    return {
      active: 0,

      list: [],
      isLoadMore: true,
      current_page: 1,
      last_page: 1,
      integral:"",

    };
  },
  activated() {
    this.integral = localStorage.getItem('integral')||localStorage.getItem('integralLang')||'积分';
    this.isLoadMore = true;
    this.getData({ page: 1, search: { status: 3 } })
  },
  methods: {
    change(active) {
      this.active = active;
      let status = active == 0 ? 3 : active == 1 ? 5 : active == 2 ? 4 : active;
      this.getData({ page: 1, search: { status } });
    },
    async getData(json) {
      let { result, data: { data, current_page, last_page }, msg } = await $http.post("plugin.exchange-code.api.record.list", json);
      this.isLoadMore = true;
      if (result) {
        this.current_page = current_page;
        this.last_page = last_page;
        if (current_page == 1) {
          this.list = data || [];
        } else {
          this.list = this.list.concat(data);
        }
      } else {
        this.$toast(msg)
      }
    },
    getMoreData() {
      if (this.current_page >= this.last_page) {
        return;
      }
      this.isLoadMore = false;
      let json = {
        page: this.current_page + 1,
        search: {
          status: this.active + 3
        }
      }
      this.getData(json)
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep .van-tabs__nav {
  background: none;
}

.redeem-code-history {
  .box {
    display: flex;
    padding: 1rem 0 1.0625rem 1.8125rem;

    span {
      margin-right: 1.375rem;
      flex-shrink: 0;
    }
  }

  .current {
    color: var(--themeBaseColor);
    position: relative;
  }

  .current::after {
    content: "";
    position: absolute;
    bottom: -0.25rem;
    left: -0.3125rem;
    height: 0.125rem;
    width: calc(100% + 0.625rem);
    background: var(--themeBaseColor);
  }

  .time {
    color: #979797;
    font-size: 0.625rem;
    text-align: left;
    margin: 0.1rem 0 0.2rem;
  }

  .name {
    color: #333;
    font-size: 0.8125rem;
    text-align: left;
  }

  .left {
    position: relative;
    padding: 1.3rem 0.9375rem 0.437rem 0.625rem;
  }

  .tips {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 0.625rem;
    color: #8c5b00;
    padding: 0.1rem 0.2813rem 0.21em 0.31rem;
    border-radius: 0 0 0.4rem 0;
    white-space:nowrap;
    background: #fdd845;
  }

  .right {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0.75rem 0.625rem;
    flex-shrink: 0;
    font-size: 0.625rem;
    color: var(--themeBaseColor);
  }

  .line {
    position: absolute;
    width: 3px;
    left: 0;
    height: 2.75rem;
    border-left: 1px dotted #afafaf;
  }

  .list-item {
    display: flex;
    justify-content: space-between;
    border-radius: 0.5625rem;
    overflow: hidden;
    background: #fff;
    margin-bottom: 0.625rem;
    opacity: 0.7;
  }

  .list {
    padding: 0.7rem 0.625rem 1rem;
  }
}
</style>
